<template>
  <page-meta :root-font-size="globalData.fontsize + 'px'" user-scalable="no" viewport-fit="cover" style="display: block"></page-meta>
  <view class="viewList h100p" :style="globalData.appStyle.mainStyle">
    <view :style="globalData.appStyle.navStyle">
      <uni-nav-bar :height="globalData.navBarInfo.height" left-icon="left" backgroundColor="#FF7C00" dark title="浏览列表" :border="false" @clickLeft="back" />
    </view>
    <view :style="globalData.appStyle.contentStyle">
      <view class="tagBox flr w100p">
        <text v-for="(item, index) in tagList" :key="item" class="tag" :class="{ activeTag: index + 1 === Number(type) }" @click.stop="tagClick(index)">{{ item }}</text>
      </view>
      <view class="listBox">
        <scroll-view scroll-y @scrolltolower="queryMyCheckList" class="scrollList">
          <view v-for="(item, index) in viewList" :key="item.id" class="itemBox" :class="{ noTop: index === 0 }" @click="jumpToPage(item)">
            <view class="titleBox">
              <text class="l22 ell2 f14">
                <text class="btn1 f12 cWH mr6" v-if="item.checkType === '1'">采购</text>
                <text class="btn2 f12 cWH mr6" v-else>销售</text>
                {{ item.obj.title ? item.obj.title : item.obj.detailInfo }}
              </text>
            </view>
            <view class="flb" v-if="type === '2'">
              <view class="demandTagBox flw">
                <view v-for="(label, key) in item.obj.labels.split(',').filter(el => el) || []" :key="key" :class="key < 2 ? 'orangeTag' : 'grayTag'">
                  {{ label }}
                </view>
              </view>
              <view class="flr">
                <view class="flcv flr mr16">
                  <img src="@/static/img/procurement/addLike.png" class="w16 h16 mr4" />
                  <text>{{ item.obj.awardQty }}</text>
                </view>
                <view class="flcv flr">
                  <img src="@/static/img/procurement/watched.png" class="w16 h16 mr4" />
                  <text>{{ item.obj.checkQty }}</text>
                </view>
              </view>
            </view>
            <view class="flca flb h32" v-if="type === '2'">
              <view v-if="item.obj.status === '1'" class="h32 l32 f12 cGY3">审核中</view>
              <view v-else-if="item.obj.status === '2'" class="h32 l32 f12 cGY3">正在找</view>
              <view v-else-if="item.obj.status === '3'" class="h32 l32 f12 cGY3">未通过</view>
              <view v-else-if="item.obj.status === '4'" class="h32 l32 f12 cGY3">已下架</view>
              <view class="h32 l32 f12 cGY2">{{ item.checkTime }}被浏览过</view>
            </view>
            <view class="flca flb h32" v-else>
              <view class="flca flr h32">
                <view class="flr h16">
                  <image class="poistion w16 h16 mr6" src="@/static/img/procurement/position.png"></image>
                  <view class="h16 l16 f12 mr16">{{ item.obj.deliveryAddress }}</view>
                </view>
              </view>
              <view class="h32 l32 f12">{{ item.checkTime }}浏览过</view>
            </view>
          </view>
          <view class="noData" v-if="viewList.length === 0">
            <view class="noDataImgBox flca">
              <image class="nodataImg" src="https://qzdsoft.oss-cn-shenzhen.aliyuncs.com/9b45410e958a47c68d56e64cc27fbc29e.jfif" mode="scaleToFill" />
            </view>
            <view class="noRecord">暂无记录</view>
          </view>
        </scroll-view>
      </view>
    </view>
  </view>
</template>
<script>
import commonMxins from '@/mixins/common.js';
const api = require('@/utils/request.js');
export default {
  mixins: [commonMxins],
  data() {
    return {
      pageSize: 20,
      pageNum: 1,
      timestampFlag: '',
      keywords: '',
      viewList: [],
      tagList: ['我看过谁', '谁看过我'],
      type: '1'
    };
  },
  onLoad(option) {
    if (option.type) {
      this.type = option.type;
    }
    this.queryMyCheckList();
  },
  methods: {
    onShareAppMessage(res) {
      return { title: 'E商机-商机触手可得', path: `/pages/procurementPage?shareId=${this.globalData.userInfo.id}` };
    },
    onShareTimeline(res) {
      return { title: 'E商机-商机触手可得', path: '/pages/procurementPage' };
    },
    async queryMyCheckList() {
      let timestampFlag = 0; //第一次查询的是0
      let len = this.viewList.length;
      if (len > 0) {
        timestampFlag = this.viewList[len - 1].timestampFlag;
      }
      //这边为了防止丢数据(同一时间点N多人同时发)/查重复数据(刷新前有人发了新动态)，用timeStampFlag字段对动态进行排序，后端会对统一毫秒发的动态再加1毫秒，保证没有在同一时间有不同的人发动态
      let data = {
        pageSize: this.pageSize,
        pageNum: this.pageNum++,
        timestampFlag,
        type: this.type,
        keywords: this.keywords
      };
      if (data.timestampFlag === 0) {
        delete data.timestampFlag;
      }
      let res = await api.request({ url: '/appUser/queryMyCheckList', data, method: 'GET' });
      this.viewList = [...this.viewList, ...res.data];
      if (res.data.length === 0) {
        uni.showToast({ title: '没有数据啦~~', icon: 'none' });
      }
    },
    tagClick(index) {
      this.type = String(index + 1);
      this.viewList = [];
      this.queryMyCheckList();
    },
    jumpToPage(item) {}
  }
};
</script>
<style lang="scss" scoped>
.viewList {
  .tagBox {
    padding: 20rem;
    box-sizing: border-box;
    height: 72rem;
    .tag {
      text-align: center;
      width: 80rem;
      height: 32rem;
      border-radius: 5rem;
      box-sizing: border-box;
      border: 1rem solid rgba(255, 124, 0, 1);
      line-height: 32rem;
      font-size: 16rem;
      color: rgba(255, 124, 0, 1);
      margin-right: 16rem;
      &.activeTag {
        color: #ffffff;
        background: linear-gradient(180deg, rgba(255, 202, 153, 1) 0%, rgba(252, 122, 0, 1) 100%);
      }
    }
  }
  .listBox {
    height: calc(100% - 72rem);
    padding: 0 12rem;
    box-sizing: border-box;
    border-top: 1rem solid #ff7c00;
    border-radius: 20rem 20rem 0 0;
    .scrollList {
      height: 100%;
      .itemBox {
        margin-top: 8rem;
        border-radius: 10rem;
        background: rgba(255, 251, 247, 1);
        padding: 12rem;
        box-sizing: border-box;
        .titleBox {
          padding: 5rem 0;
        }
        .btn1 {
          font-size: 12rem;
          height: 22rem;
          line-height: 22rem;
          padding: 0 6rem;
          box-sizing: border-box;
          border-radius: 3rem;
          background: #ffc300;
        }
        .btn2 {
          font-size: 12rem;
          height: 22rem;
          line-height: 22rem;
          padding: 0 6rem;
          box-sizing: border-box;
          border-radius: 3rem;
          background: #2a82e4;
          left: 300px;
        }
        .demandTagBox {
          padding: 5rem 0;
          box-sizing: border-box;
        }
        .btn3 {
          margin-top: 5rem;
          font-size: 12rem;
          height: 22rem;
          line-height: 22rem;
          padding: 0 6rem;
          box-sizing: border-box;
          border-radius: 5rem;
          background: #2a82e4;
        }
        .orangeTag,
        .grayTag {
          margin-top: 5rem;
          font-size: 12rem;
          height: 22rem;
          line-height: 22rem;
          padding: 0 6rem;
          box-sizing: border-box;
          border-radius: 3rem;
          margin: 0 4rem 4rem 0;
        }
        .orangeTag {
          font-weight: 700;
          color: rgba(255, 118, 17, 1);
          background-color: rgba(252, 234, 215, 1);
        }
        .grayTag {
          color: #383838;
          background-color: rgba(187, 217, 250, 1);
        }
      }
      .noTop {
        margin-top: 0;
      }
    }
  }
}
</style>
